<template>
  <div class="about">
    <div ref="hhh" class="sty"></div>
  </div>
</template>

<script>
const echarts = require("echarts")
export default {
  data() {
    return {

    }
  },

  mounted() {
    this.fun()
  },

  methods: {
    fun() {
      const chart = echarts.init(this.$refs.hhh)
      const colorData = ["red","yellow","blue","violet"]
      const option = {
        xAxis: {
          show: false,

          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        legend: {
          data: ["动物"],
          left: 0
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        yAxis: {
          data: ["蜘蛛","小鸟","大雁","小鸡"],
          inverse: true,
          // 是否翻转
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },

        series: [
          {
            name: "动物",
            type: "bar",
            barGap: "-100%",
            zlevel: 1,
            barWidth: 40,
            // yAxisIndex: 1,
            data: [20,20,30,40],
            barCategoryGap: 50,
            label: {
              show: true,
              position: "inside",
              // 柱形图上面的内容
              formatter: (data) => {
                return (data.data /60).toFixed(1)*100 + "%"
              }
            },
            itemStyle: {
              borderRadius: 20,
              color: (params) => {
                // 每一个柱形图的颜色
                return colorData[params.dataIndex]
              },
              borderWidth: 10,
              borderColor: "transparent",
              borderRadius: 20
            }
          },
          {
            type: "bar",
            barGap: "-100%",
            data: [60,60,60,60],
            barCategoryGap: 50,
            color: "#ffffff",
            // yAxisIndex: 1,
            barWidth: 40,
            itemStyle: {
              borderWidth: 5,
              borderColor: "green",
              borderRadius: 20
            }
          }
        ]

      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
   .sty{
     height: 500px;
     width: 500px;
   }
</style>
